import React, { memo, useEffect, useState } from "react";

type Props = {
  keywords: string;
};

/**
 * @func 环境事件页面组件
 * @param props
 * @returns React.FC
 */
const EnvEvent: React.FC<Props> = (props) => {
  const { keywords } = props;
  const [index, setIndex] = useState("");
  const [origin, setOrigin] = useState("");
  const [time, setTime] = useState("7d");

  useEffect(() => {
    fetch("/static/feConfig.json")
      .then((res) => {
        return res.json();
      })
      .then((res) => {
        const { index, origin, time } = res.esUrl;
        setIndex(index);
        setOrigin(origin);
        setTime(time)
      });
  }, []);

  //NOTE ES kibana 嵌入链接
  const ESURL = `${origin}/app/discover#/?embed=true&_g=(filters:!(),refreshInterval:(pause:!t,value:0),time:(from:now-${time},to:now))&_a=(columns:!(),filters:!(('$state':(store:appState),meta:(alias:!n,disabled:!f,index:'${index}',key:node.keyword,negate:!f,params:(query:${keywords}),type:phrase),query:(match_phrase:(node.keyword:${keywords})))),index:'${index}',interval:h,query:(language:kuery,query:''),sort:!(!(time,desc)))`
  return (
    <>
      <iframe
        src={ESURL}
        style={{
          height: "2500px",
          border: "initial",
          width: "-webkit-fill-available",
        }}
      />
    </>
  );
};

export default memo(EnvEvent);
